<template>
	<view>
		<view class="gift-dm">
			<view class="dm-item" v-if="isShowDM">
				<image class="dm-avatar" :src="dmInfo.user.avatar"></image>
				
				<view class="dm-info">
					<text class="dm-info-nickname">{{dmInfo.user.nickname}}</text>
					<text class="dm-info-giftName">送{{dmInfo.gift.title}}</text>
				</view>
				
				<image class="gift-img" :src="dmInfo.gift.show_file"></image>
				
				<view class="gift-num-bg">
					<text class="gift-num">x{{dmInfo.number}}</text>
				</view>
			</view>
		</view>
		
		<scroll-view class="chat-list" scroll-y :show-scrollbar="false" id="scrollView" :scroll-top="scrollTop">
			<view class="list" id="chatList">
				<block v-for="(item, index) in chatList" :key="index">
					<view class="chat-item" @click="onItem(item)" :id="'scroll_' + index">
						<view class="item" style="max-width: 690rpx;">
							<!-- <text class="nickname">{{my_user_id == item.user_id ? '我' : item.nickname}}:</text> -->
							<text class="nickname">{{item.nickname}}:</text>
							<text class="message">{{item.content}}</text>
						</view>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import storage from '@/utils/storage';
	export default {
		data() {
			return {
				my_user_id: "",
				chatList: [],
				isRemove: false,
				
				animationData: null,
				
				dmInfo: null,
				isShowDM: false,
				dmShowTimer: null,
				
				scrollTop: 0
			}
		},
		destroyed() {
			uni.$off("chatInfo")
			uni.$off("sendGiftDM")
		},	
		mounted() {
			/**
			 * 聊天内容
			 */
			uni.$on("chatInfo", (info) => {
				this.chatList.push(info)
				this.onScrollBottom()
			});
			/**
			 * 礼物弹幕
			 */
			uni.$on("sendGiftDM", (data) => {
				clearTimeout(this.dmShowTimer)
				this.dmInfo = data
				this.isShowDM = true
				this.dmShowTimer = setTimeout(() => {
					this.isShowDM = false
				}, 3000)
			})
			this.my_user_id = storage.getUserID()
		},
		methods: {
			/**
			 * 滑动到最底部
			 */
			onScrollBottom() {
				let that = this;
				let query = uni.createSelectorQuery()
				query.select('#scrollView').boundingClientRect()
				query.select('#chatList').boundingClientRect()
				query.exec((res) => {
					//获取所有内部子元素的高度
					//判断子元素高度是否大于显示高度
					if (res[1].height > res[0].height) {
						that.scrollTop = res[1].height - res[0].height + 40;
					}
				})
			},
			/**
			 * 动画
			 */
			createAnimate() {
				
			},
			/**
			 * 显示列表
			 */
			onItem(item) {
				if (storage.getUserID() === storage.getLiveRoomInfo().user_id) {
					uni.$emit('showUserInfo', user_id)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.gift-dm {
		width: 750rpx;
		height: 100rpx;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		// position: relative;
	}
	.dm-item {
		// position: absolute;
		// left: 750rpx;
		// top: 10rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0));
		padding: 0 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		// transform: translate(750rpx, 0);
	}
	
	.dm-item-x {
		// transform: translate(0, 0);
	}
	
	
	.dm-avatar {
		width: 62rpx;
		height: 62rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.dm-info {
		margin-left: 10rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.dm-info-nickname {
		color: white;
		font-size: 26rpx;
	}
	.dm-info-giftName {
		color: white;
		font-size: 22rpx;
	}
	.gift-img {
		margin-left: 30rpx;
		width: 80rpx;
		height: 80rpx;
	}
	.gift-num-bg {
		margin-left: 10rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
	.gift-num {
		color: white;
		font-size: 30rpx;
	}
	
	
	.chat-list {
		margin-top: 20rpx;
		width: 750rpx;
		height: 350rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.list {
		width: 750rpx;
		overflow: hidden;
		padding: 0rpx 30rpx;
	}
	.chat-item {
		width: 690rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}
	.item {
		background-color: rgba(0, 0, 0, 0.25);
		padding: 10rpx 20rpx 10rpx 15rpx;
		border-radius: 2000rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.nickname {
		color: #FFCCE6;
		font-size: 26rpx;
	}
	.message {
		margin-left: 10rpx;
		color: white;
		font-size: 26rpx;
		flex: 1;
		flex-wrap: wrap;
	}
	.content {
		background-color: transparent;
		color: white;
		font-size: 26rpx;
	}
</style>